import React, { useCallback } from 'react';

import ArrowLeftIcon from 'components/icons/ArrowLeftIcon';
import Text, { TEXT_VIEW } from 'components/Text';
import { classnames } from 'utils';

import classes from './PageStepper.module.scss';

export type PageStepperProps = {
    currentPage: number;
    pagesCount: number;
    getPage: (page: number) => void;
    classname?: string;
};

const cnPageStepper = classnames(classes, 'pagestepper');

const PageStepper: React.FC<PageStepperProps> = ({ currentPage, pagesCount, getPage, classname }) => {
    const getPageHandle = useCallback((page: number) => () => getPage(page), []);
    return (
        <div className={cnPageStepper() + ` ${classname}`}>
            <ArrowLeftIcon
                className={cnPageStepper('icon', { left: true, disabled: 1 === currentPage })}
                onClick={getPageHandle(currentPage - 1)}
            />
            <span onClick={getPageHandle(1)}>
                <Text view={TEXT_VIEW.p18} className={cnPageStepper('page', { currentPage: currentPage === 1 })}>
                    1
                </Text>
            </span>
            {currentPage > 4 && pagesCount > 1 && (
                <Text view={TEXT_VIEW.p18} className={cnPageStepper('dots')}>
                    ...
                </Text>
            )}
            {[...Array(pagesCount).keys()].map((page) => {
                if (
                    page > 0 &&
                    page < pagesCount - 1 &&
                    !(currentPage > 4 && page < Math.min(currentPage - 2, pagesCount - 5)) &&
                    !(currentPage < pagesCount - 3 && page > Math.max(currentPage, 4))
                ) {
                    return (
                        <span key={page} onClick={getPageHandle(page + 1)}>
                            <Text
                                view={TEXT_VIEW.p18}
                                className={cnPageStepper('page', { currentPage: page + 1 === currentPage })}
                            >
                                {page + 1}
                            </Text>
                        </span>
                    );
                }
                return <></>;
            })}

            {pagesCount > 1 && (
                <>
                    {currentPage < pagesCount - 3 && (
                        <Text view={TEXT_VIEW.p18} className={cnPageStepper('dots')}>
                            ...
                        </Text>
                    )}
                    <span onClick={getPageHandle(pagesCount)}>
                        <Text
                            view={TEXT_VIEW.p18}
                            className={cnPageStepper('page', { currentPage: pagesCount === currentPage })}
                        >
                            {pagesCount}
                        </Text>
                    </span>
                </>
            )}
            <ArrowLeftIcon
                className={cnPageStepper('icon', { right: true, disabled: currentPage === pagesCount })}
                onClick={getPageHandle(currentPage + 1)}
            />
        </div>
    );
};

export default PageStepper;
